function App() {
  this.el = {
    // 路由
    router: '#page-router',
    // 每个页面的焦点图
    focus: ['#index-focus', '#news-focus', '#video-focus', '#record-focus'],
    // 列表
    list: [
      {
        tab: '#index-switch',
        el: '#index-list'
      }, {
        el: '#news-list',
        config: {
          navigation: {
            nextEl: '#news-list .swiper-button-next',
            prevEl: '#news-list .swiper-button-prev'
          }
        }
      }, {
        el: '#video-list',
        variable: 'videoList',
        config: {
          allowTouchMove: false
        },
        children: [
          {
            tab: '#video-switch',
            el: '#video-list-page',
            config: {
              allowTouchMove: false
            },
            children: [
              {
                el: '#video-list-recommend',
                hasProgressSwiper: true
              }, {
                el: '#video-list-hot',
                hasProgressSwiper: true
              }, {
                el: '#video-list-record',
                hasProgressSwiper: true
              }
            ]
          }, {
            el: '#video-list-result',
            hasProgressSwiper: true
          }
        ]
      }, {
        el: '#record-list',
        variable: 'recordList',
        config: {
          allowTouchMove: false
        },
        children: [
          {
            el: '#record-list-page',
            hasProgressSwiper: true
          }, {
            el: '#record-list-result',
            hasProgressSwiper: true
          }
        ]
      }
    ],
    // 详情页需要绑定事件的元素
    closest: '.edu-news-detail,.edu-video-detail,.edu-media,.edu-thumbnail'
  }
  this.router = null
  // 视频详情播放器
  this.videoPlayer = null

  this.init()
}

App.prototype = {
  init: function() {
    this.initRouter()
    this.initFocus()
    this.initList()
    this.initEvent()
    this.initVideo()
    this.initWeather()
  },
  // 初始化路由
  initRouter: function() {
    this.router = new Swiper(this.el.router, {
      spaceBetween: 20,
      allowTouchMove: false,
      direction: 'vertical',
      hashNavigation: {
        watchState: true
      },
      on: {
        slideChange: function() {
          $('.edu-nav-link').removeClass('active')
          $('.edu-nav-link').eq(this.activeIndex).addClass('active')
        }
      }
    })
  },
  // 初始化焦点图
  initFocus: function() {
    _.each(this.el.focus, function(item, index) {
      
      new Swiper(item, {
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },
        pagination: {
          el: item + ' .swiper-pagination',
          clickable: true
        }
      })

    })
  },
  // 初始化列表
  initList: function() {
    var that = this

    _.each(this.el.list, function(item, index) {
      var swiper = item.hasProgressSwiper ? that.hasProgressSwiper(item.el, item.config) : new Swiper(item.el, item.config)

      // 记录变量
      if (item.variable) {
        window[item.variable] = swiper
      }

      // 绑定tab
      item.tab && that.bindTab(item.tab, swiper)
      
      _.each(item.children, function(_item, _index) {
        var _swiper = _item.hasProgressSwiper ? that.hasProgressSwiper(_item.el, _item.config) : new Swiper(_item.el, _item.config)

        // 记录变量
        if (_item.variable) {
          window[_item.variable] = _swiper
        }

        // 绑定tab
        _item.tab && that.bindTab(_item.tab, _swiper)
        
        _.each(_item.children, function(__item, __index) {
          var __swiper = __item.hasProgressSwiper ? that.hasProgressSwiper(__item.el, __item.config) : new Swiper(__item.el, __item.config)

          // 记录变量
          if (__item.variable) {
            window[__item.variable] = __swiper
          }

          // 绑定tab
          __item.tab && that.bindTab(__item.tab, __swiper)
        })
        
      })   

    })
  },
  // 初始化视频
  initVideo: function() {
    this.videoPlayer = videojs('my-video')
  },
  // 初始化事件
  initEvent: function() {
    var that = this
    // 底部菜单事件
    $(document).on('click', '.edu-nav-link', function(e) {
      e.preventDefault()

      var $el = $(e.target)

      if (!$el.is('.edu-nav-link')) {
        $el = $el.parents('.edu-nav-link')
      }

      if ($el.hasClass('disabled') || $el.attr('disabled') || $el.hasClass('back')) {
        return
      }
      
      $el
        .addClass('active')
        .siblings()
        .removeClass('active')

      that.router.slideTo($el.index())

    })

    // 底部菜单返回按钮
    $(document).on('click', '.edu-nav-link.back', function(e) {
      if ($('.edu-news-detail,.edu-video-detail').hasClass('active')) { // 如果有详情页打开则关闭详情页
        $(that.el.closest).removeClass('active')
        $(that.el.router).css('visibility', 'visible')
      } else if (window.videoList.activeIndex === 1) { // 如果正在视频结果页，则跳回到视频搜索页
        window.videoList.slideTo(0)
      } else if (window.recordList.activeIndex === 1) { // 如果正在记录结果页，则跳回到记录搜索页
        window.recordList.slideTo(0)
      } else { // 路由返回
        history.back()
      }
    })
    
    // 进入文章详情
    $(document).on('click', '[data-news-id]', function(e) {
      e.preventDefault()

      var $el = $(e.target)

      if (!$el.is('[data-news-id]')) {
        $el = $el.parents('[data-news-id]')
      }
      
      var id = $el.data('news-id')

      if (!id) {
        return
      }
      
      $(that.el.router).css('visibility', 'hidden')
      $('.edu-news-detail').addClass('active')
      // 需要在这里传递详情页的内容
      // $('#detail .edu-article').html('aaa')

      new Swiper('#articleDetail', {
        scrollbar: {
          el: '#articleDetail .swiper-scrollbar'
        },
        direction: 'vertical',
        slidesPerView: 'auto',
        mousewheelControl: true,
        freeMode: true,
        roundLengths : true, //防止文字模糊
      })

    })

    // 进入视频详情
    $(document).on('click', '[data-video-id]', function(e) {
      e.preventDefault()

      var $el = $(e.target)

      if (!$el.is('[data-video-id]')) {
        $el = $el.parents('[data-video-id]')
      }
      
      var id = $el.data('video-id')

      if (!id) {
        return
      }
      
      $(that.el.router).css('visibility', 'hidden')
      $('.edu-video-detail').addClass('active')
      
      // 动态设置vedio播放路径
      that.videoPlayer.src('http://vjs.zencdn.net/v/oceans.mp4')
      that.videoPlayer.load('http://vjs.zencdn.net/v/oceans.mp4')
      // 如果需要打开即播放则取消此注释
      // that.videoPlayer.play()

      // 需要动态更新视频详情页相关视频列表
      // $('#vedioDetail').html()

      // 动态绑定事件
      that.bindTab('#video-detail-switch', new Swiper('#vedioDetail'))

    })

    // 点击空白区域关闭文章或视频详情
    $(document).on('click', function(e) {
      e.stopPropagation()
      
      if($(e.target).closest(that.el.closest).length === 0){

        if ($('.edu-news-detail,.edu-video-detail').hasClass('active')) {
          $('.edu-news-detail,.edu-video-detail').removeClass('active')
          $(that.el.router).css('visibility', 'visible')
          that.videoPlayer.pause()
        }

      }
    })

    // 按钮动画
    $(document).on('click', '.edu-next,.edu-prev,.edu-nav-link', function(e) {

      var $el = $(e.target)

      if (!$el.is('.edu-next,.edu-prev,.edu-nav-link')) {
        $el = $el.parents('.edu-next,.edu-prev,.edu-nav-link')
      }

      $el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $el.removeClass('rubberBand')
      }).addClass('animated rubberBand')
    })

    // 按钮随机出现动画
    var $link   = $('.edu-nav-link'),
        linkLen = $link.length

    var randomLinkAnimeTimer = setInterval(function() {

      var $el = $link.eq(_.random(linkLen))

      $el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $el.removeClass('rubberBand')
      }).addClass('animated rubberBand')

    }, 2000)

    // 自定义下拉列表框
    $(document).on('click', '.edu-select', function(e) {
      var $el = $(e.target),
          isClickBound = $el.is('.edu-select-bound') ? true : false

      if (!$el.is('.edu-select')) {
        $el = $el.parents('.edu-select')
      }

      if ($el.hasClass('active')) {
        // 如果已经打开则关闭
        !isClickBound && $el.removeClass('active')
      } else {
        $el.addClass('active')
      }


    })
    
    // 选择自定义下拉列表框内容
    $(document).on('click', '.edu-select-bound-item', function(e) {
      e.stopPropagation()

      var $el   = $(e.target),
          $p    = $el.parents('.edu-select'),
          $ipt  = $p.find('[type="hidden"]'),
          $txt  = $p.find('.edu-select-text'),
          value
      
      if (!$el.is('.edu-select-bound-item')) {
        $el = $el.parents('.edu-select-bound-item')
      }

      value = $el.data('value')
      
      $txt.text($el.text())
      $ipt.val(value)

      $p.removeClass('active')

    })
    
    // 点击空白区域关闭下拉列表框
    $(document).on('click', function(e) {
      e.stopPropagation()
      
      if($(e.target).closest('.edu-select').length === 0){
        $('.edu-select').removeClass('active')
      }
    })
    
    /* 
     * 视频页面选择下拉列表框跳转到搜索页
     * 当选择某个选项过 n 秒后跳转到搜索页面，因为搜索有多个选项，但是没有搜索按钮
    */
    var videoFilterLimitTime = 2000,
        videoFilterLimitTimer

    $(document).on('click', '#video-filter .edu-select-bound-item', function(e) {
      // 重新计算时间
      clearTimeout(videoFilterLimitTimer)
      
      // 筛选的value值
      var gradeVal   = $('#video-filter-grade input[type="hidden"]').val(),
          subjectVal = $('#video-filter-subject input[type="hidden"]').val()

      videoFilterLimitTimer = setTimeout(function() {
        window.videoList.slideTo(1)
      }, videoFilterLimitTime)


    })
    

    // 记录页面
    var recordFilterLimitTime = 2000,
        recordFilterLimitTimer

    $(document).on('click', '#record-filter .edu-select-bound-item', function(e) {
      // 重新计算时间
      clearTimeout(recordFilterLimitTimer)
      
      // 筛选的value值
      var gradeVal   = $('#record-filter-grade input[type="hidden"]').val(),
          subjectVal = $('#record-filter-subject input[type="hidden"]').val()

      recordFilterLimitTimer = setTimeout(function() {
        window.recordList.slideTo(1)
      }, recordFilterLimitTime)


    })

  },
  // 初始化天气
  initWeather: function() {
    // 根据接口获取天气信息
  },
  // 绑定tab与swiper之间的关联
  bindTab: function(tab, swiper) {
    var $tab = $(tab)

    // bind switch
    $tab.on('click', '.edu-switch-item', function(e) {
      e.preventDefault()

      var $el = $(e.target)

      if (!$el.is('.edu-switch-item')) {
        $el = $el.parents('.edu-switch-item')
      }

      if ($el.hasClass('disabled') || $el.attr('disabled')) {
        return
      }

      $el
        .addClass('active')
        .siblings()
        .removeClass('active')

      swiper.slideTo($el.index())

    })
    
    // bind swiper
    swiper.on('slideChange', function() {
      $tab.find('.edu-switch-item').removeClass('active')
      $tab.find('.edu-switch-item').eq(this.activeIndex).addClass('active')
    })
  },
  // 有进度条的swiper
  hasProgressSwiper(el, config) {
    return new Swiper(el, $.extend({
      navigation: {
        nextEl: el + ' .swiper-button-next',
        prevEl: el + ' .swiper-button-prev'
      },
      pagination: {
        el: el + ' .swiper-pagination',
        type: 'custom',
        renderCustom: function (swiper, current, total) {
          if ($(el + ' .edu-pagination-progressbar').length) {
            $(el + ' .edu-pagination-progressbar').css('width', (current / total * 100).toFixed(2) + '%')
            return
          }
          return '<div class="edu-pagination-progressbar" style="width:' + (current / total * 100).toFixed(2) + '%">\
                    <div class="edu-pagination-indicator">第' + current + '页 / 总' + total + '页</div>\
                  </div>'
        }
      }
    }, config || {}))
  }
}

var isObject = function(o) {
  return Object.prototype.toString.call(o) === '[object Object]' ? true : false
}

new App()